<template>
  <div class="district-select-container">

    <div class="district-select-value-box">
      <div class="select-value-box" v-if="province" @click="openPage1(province)">
        <span class="select-name">{{province}}</span>
        <img src="./next.png" class="next-pic"/>
      </div>
      <div class="select-value-box" v-if="city" @click="openPage2(province,city)">
        <span class="select-name">{{city}}</span>
        <img src="./next.png" class="next-pic"/>
      </div>
      <div class="select-value-box">
        <span class="select-title">请选择</span>
      </div>
    </div>
    <div class="select-line-box"></div>

    <div class="district-select-item-box" v-if="showData == 1">
      <div class="district-select-item" v-for="(item,i) in itemList" :key="i"
           @click="selectProvince(item.name,item.city)">
        <span>{{item.name}}</span>
      </div>
    </div>

    <div class="district-select-item-box" v-if="showData == 2">
      <div class="district-select-item" v-for="(item,j) in cityList" :key="j"
           @click="selectCity(item.name,item.area)">
        <span>{{item.name}}</span>
      </div>
    </div>

    <div class="district-select-item-box" v-if="showData == 3">
      <div class="district-select-item" v-for="(name,k) in townList" :key="k"
           @click="selectTown(name)">
        <span>{{name}}</span>
      </div>
    </div>

  </div>
</template>

<script>
  import treeList from "../../../../static/province-tree"

  export default {
    data() {
      return {
        province: "",
        city: "",
        town: "",
        cityList: [],
        townList: [],
        itemList: treeList,
        showData: 1
      }
    },
    methods: {
      selectProvince(name, cityList) {
        if ("北京" == name || "天津" == name || "上海" == name || "重庆" == name) {
          this.city = name;
          this.showData = 3;
          this.townList = cityList[0].area;
        } else if ("全国" == name || "钓鱼岛" == name) {
          this.city = name;
          this.showData = 3;
          this.townList = [];
          this.townList.push(name);
        } else {
          this.province = name;
          this.showData = 2;
          this.cityList = cityList;
        }
      },
      selectCity(name, townList) {
        this.city = name;
        this.showData = 3;
        this.townList = townList;
      },
      selectTown(name) {
        this.town = name;
        let address = this.town == "全市" ? this.city : this.town;
        this.$router.push({
          path: "/proxywork",
          query: {
            "address": address
          }
        });
      },
      openPage1() {
        this.province = "";
        this.city = "";
        this.showData = 1;
      },
      openPage2(province, city) {
        this.city = "";
        if ("北京" == city || "天津" == city || "上海" == city || "重庆" == city || "全国" == city || "钓鱼岛" == city) {
          this.showData = 1;
        } else {
          this.showData = 2;
          for (let i = 0; i < this.itemList.length; i++) {
            if (province == this.itemList[i].name) {
              this.cityList = this.itemList[i].city;
            }
          }
        }
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"

  .district-select-container
    wh(100%, 100%)
    background: #f5f5f5
    .district-select-value-box
      display: flex
      align-items: center
      wh(100%, 1.2rem)
      background: #FFF
      position: fixed
      z-index: 99
      top: 0
      .select-value-box
        wh(3.6rem, 1.2rem)
        line-height: 1.2rem
        fj(center, center)
        position: relative
        &:last-child
          width: 3.253rem
        .select-title
          size-color(0.427rem, rgba(51, 51, 51, 1))
          color: #3CAFFF
        .next-pic
          position: absolute
          right: 0
          wh(0.32rem, 0.32rem)
        .select-name
          width: 2rem
          text-align: center
          ellipsis()
          size-color(0.427rem, rgba(51, 51, 51, 1))
    .select-line-box
      wh(100%, 0.267rem)
      background: #f5f5f5
      position: fixed
      top: 1.2rem
      z-index: 99
    .district-select-item-box
      wh(100%, auto)
      background: #FFF
      position: absolute
      top: 1.467rem
      .district-select-item
        margin-left: 3.2%
        display: flex
        align-items: center
        wh(9.68rem, 1.12rem)
        border-bottom: 0.027rem solid #F2F2F2
        size-color(0.4rem, #333)
</style>
